import Base from "../base.js";
import SchedulesApi from "../../api/schedules.js";
import _ from "lodash";


export default class extends Base {
    constructor(props) {
        super(props);
        this._id = props._id;
        this.sortmoviesData = ``;
    }
    render() {
        this.$el.html(`
                <div>
                    <h1 style="margin:20px 0px 0px 5px">选座</h1>
                    <button type="button" class="layui-btn" name="back-sortmovies" style="margin:20px 78px 20px 0px" >返回排片</button>
                </div>
                <div style="display:flex;">
                    <table>
                        <tbody class="chooseSeat-list"></toby>
                    </table>
                
                    <div style="margin-left:20px;">
                        <div class="layui-panel">
                            <div style="width:310px;height:250px;padding:20px;" class="seatingsContent">
                                <p><span style="display:inline-block;width:60px;margin-bottom:5px;">电影名：</span><span class="movieName" style="font-size:22px"></span></p>
                                <p><span style="display:inline-block;width:60px;margin-bottom:5px;">影城：</span><span class="cinemasName" style="font-size:16px"></span></p>
                                <p><span style="display:inline-block;width:60px;margin-bottom:5px;">放映厅：</span><span class="theatersName" style="font-size:16px"></span></p>
                                <p><span style="display:inline-block;width:60px;margin-bottom:5px;">时间：</span><span class="time" style="font-size:16px"></span></p>
                                <p><span style="display:inline-block;width:60px;">价格： </span><span class="price" style="display:inline-block;font-size:24px;color:red;widht:50px;">0</span><span>元</span></p>
                                <div  class="seatingsList"></div>
                        </div>
                    </div>
                    <div style="width:100px;margin:10px auto">
                        <button class="save-btn layui-btn" name="enterShop" >确认购买</button>
                    </div>
                </div>
        `)
        this.$chooseSeatList = $(".chooseSeat-list");
        this.$backSortmoviesBtn = $("button[name='back-sortmovies']");
        this.$shopBtn = $("button[name='enterShop']");
        this.$seatingsContent = $(".seatingsContent");
        this.$seatingsList = $(".seatingsList");
        this.$movieNameEle = $(".movieName");
        this.$cinemasNameEle = $(".cinemasName");
        this.$theatersNameEle = $(".theatersName");
        this.$timeEle = $(".time");
        this.$priceEle = $(".price");
    }


    // 给按钮添加返回
    backSortmovies() {
        location.hash = `#/info/sort-movies`;
    }
    // 点击选座按钮
    chooseSeatBtn(e) {

        if (e.target.dataset.index == 0) {
            // 点击未选中的座位变化layui样式
            if (e.target.getAttribute("class") == "layui-btn layui-btn-primary") {
                e.target.setAttribute("class", "layui-btn layui-btn-danger");
                // 将选中的座位添加到选中框，并将id一起携带
                let data = this.$seatingsList.html();
                data += `<button type="button" class="layui-btn layui-btn-primary" name="${e.target.name}" style="margin:5px">${e.target.innerText}</button>`;
                this.$seatingsList.html(data);
            } else {
                // 取消选中座位
                e.target.setAttribute("class", "layui-btn layui-btn-primary");
                let data = this.$seatingsList.children();
                const result = [...data].filter(item => item.getAttribute("name") == e.target.getAttribute("name"))
                $(result).remove();
            }
        } else if (e.target.dataset.index == 1) {
            this.layer.msg(`此座位已被购买！`, { icon: 5 });
        }


        // 动态渲染价格
        this.$priceEle.html(this.$seatingsList.children().length * this.sortmoviesData[0].price)

    }

    // 确认购买
    async shop() {
        const shopSeat = this.$seatingsList.children();
        let shopSeatId = [];
        [...shopSeat].map(item => {
            shopSeatId.push({ seatId: item.name })
        });
        const userId = sessionStorage.getItem("usersID");
        const status = await SchedulesApi.addOrder({ shopSeatId: JSON.stringify(shopSeatId), userId });
        console.log(status);
        if (status.status) {
            layer.msg(`购买成功`, { icon: 1 })
        } else {
            this.layer.msg(`购买失败`, { icon: 2, time: 500 })
        }
    }

    handle() {
        this.$backSortmoviesBtn.on("click", this.backSortmovies.bind(this));
        this.$chooseSeatList.on("click", this.chooseSeatBtn.bind(this));
        this.$shopBtn.on("click", this.shop.bind(this));
    }

    // 获取数据
    async getSeat() {
        const seatingsData = await SchedulesApi.getSeatings(this._id);
        const sortmoviesData = await SchedulesApi.sortmoviesData(this._id);
        this.sortmoviesData = sortmoviesData;
        this.rerender(seatingsData, sortmoviesData);
    }
    // 渲染选座座位
    rerender(seatingsData, sortmoviesData) {
        this.$movieNameEle.html(sortmoviesData[0].movieId.name);
        this.$cinemasNameEle.html(sortmoviesData[0].cinemasId.name);
        this.$theatersNameEle.html(sortmoviesData[0].theaterId?.theatersName);
        this.$timeEle.html(sortmoviesData[0].showTime);
        // 通过遍历渲染9x9座位列表
        let seatContent = ``;
        for (let i = 0; i <= 8; i++) {
            let temp = `<tr>`;
            for (let j = 0; j <= 8; j++) {
                if (seatingsData[j].status == 0) {
                    temp += `<td style="display:inline-block;margin: 5px ;"> <button type="button" data-index="${seatingsData[j].status}" class="layui-btn layui-btn-primary" name="${seatingsData[j]._id}">${seatingsData[j].seatId.displayName}</button></td> `
                } else {
                    temp += `<td style="display:inline-block;margin: 5px ;"> <button type="button" data-index="${seatingsData[j].status}" class="layui-btn layui-btn-danger" name="${seatingsData[j]._id}">${seatingsData[j].seatId.displayName}</button></td> `
                }
            }
            temp += `</tr>`
            seatingsData.splice(0, 9);
            seatContent += temp;
        }
        this.$chooseSeatList.html(seatContent);
    }
    mounted() {
        this.getSeat();
    }

}